<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>upload bolckchain</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/admin/css/common.css" />
    <link rel="stylesheet" href="/layui/css/layui.css" />
</head>
<form class="layui-form" action="" enctype="multipart/form-data">
    <div class="layui-form user-info-form layui-text" style="max-width: 400px;padding-top: 25px;">
        <div class="layui-form-item">
            <label class="layui-form-label">曲名:</label>
            <div class="layui-input-block">
                <input type="text" id="titleName" class="layui-input" name="titleName" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑:</label>
            <div class="layui-input-block">
                <input type="text" name="album" class="layui-input" id="album" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">曲目:</label>
            <div class="layui-input-block">
                <input type="text" name="song" class="layui-input" id="song" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">歌手:</label>
            <div class="layui-input-block">
                <input type="text" name="singer" class="layui-input" id="singer" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作词:</label>
            <div class="layui-input-block">
                <input type="text" name="writingWords" class="layui-input" id="writingWords" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作曲:</label>
            <div class="layui-input-block">
                <input type="text" name="composition" class="layui-input" id="composition" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编曲:</label>
            <div class="layui-input-block">
                <input type="text" name="bianqu" class="layui-input" id="bianqu" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发行日期:</label>
            <div class="layui-input-block">
                <input type="text" name="lssueDate" class="layui-input" id="lssueDate" lay-verify="required" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">语言:</label>
            <div class="layui-input-block">
                <select name="language" lay-verify="">
                    <option value="">选择语言</option>
                    <option value="中文">中文</option>
                    <option value="英语">英语</option>
                </select>
                <!--<input type="text" name="language" class="layui-input" id="language" lay-verify="required">-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">音乐文件:</label>
            <div class="layui-input-block">
                <input type="file" name="yinyueFile" class="layui-input" id="yinyueFile" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">hashValue:</label>
            <div class="layui-input-block">
                <input type="text" id="hashValueShow" class="layui-input" style="width: 400px;border: 0px" readonly>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="data-blockchain">
                <i class="layui-icon layui-icon-ok"></i>
                音乐验证
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

</body>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.jquery
            ,upload = layui.upload;


        //执行一个laydate实例
        laydate.render({
            elem: '#lssueDate' //指定元素
        });

        //监听提交
        form.on('submit(data-blockchain)', function (data) {
            var fileName = $("#yinyueFile")[0].files[0].name;
            if(!verifyFile(fileName)){
                return false;
            }
            showloading(true);
            var dataField=data.field;
            var formData=new FormData();
            formData.append("titleName",dataField.titleName);
            formData.append("album",dataField.album);
            formData.append("song",dataField.song);
            formData.append("singer",dataField.singer);
            formData.append("writingWords",dataField.writingWords);
            formData.append("composition",dataField.composition);
            formData.append("bianqu",dataField.bianqu);
            formData.append("lssueDate",dataField.lssueDate);
            formData.append("language",dataField.language);
            formData.append("yinyueFile",$("#yinyueFile")[0].files[0])
            $.ajax({
                url: "https://test.ellipticcurve.com.cn:8083/yinyue/verifyDataYinyue",
                type: "post",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5Nzc2MTYzNywiaWF0IjoxNTk3NzQzNjM3fQ.8vQ-U0QHfB0Ss6fDRRGpdwhB5ra7cvhYOVt31lL_Ii4P5UjqXf_XUbJZBaj82_yN9iwN1J6LBQLJWWobM3MaEw",
                },
                success: function (result) {
                    showloading(false)
                    if(result.success=="true"){
                        $("#hashValueShow").val(result.data.hashValue);
                        var data=result.data;
                        console.log(result);
                        console.log(result.data);
                        parent.layer.open({
                            title: "blockchain info",
                            area: ['550px', '500px'],
                            content:'<div class="layui-form-item" STYLE="margin-top: 20px">'+
                                '            <label class="layui-form-label">存证Hash:</label>'+
                                '            <div class="layui-input-block">'+
                                /*'                <input type="text" id="titleName" class="layui-input" style="border: 0" value="'+data.hashValue+'" name="titleName" readonly>'+*/
                                '<textarea rows="2" cols="" style="border: 0;width: 300px;margin-left: 7px" id="hashValue">'+data.hashValue+'</textarea>'+
                                '            </div>'+
                                '        </div>'+
                                '        <div class="layui-form-item">'+
                                '            <label class="layui-form-label">上链Hash:</label>'+
                                '            <div class="layui-input-block">'+
                                /*'                <input type="textarea" name="album" class="layui-input" value="'+data.txId+'" id="album" readonly>'+*/
                                '<textarea rows="2" cols="" style="border: 0;width: 300px;margin-left: 7px" id="teamIntroduction">'+data.txId+'</textarea>'+
                                '            </div>'+
                                '        </div>'+
                                '        <div class="layui-form-item">'+
                                '            <label class="layui-form-label">上链时间:</label>'+
                                '            <div class="layui-input-block">'+
                                '                <input type="text" name="song" class="layui-input" style="border: 0" value="'+data.txTimeStamp+'"  id="song" readonly>'+
                                '            </div>'+
                                '        </div>'+
                                '        <div class="layui-form-item">'+
                                '            <label class="layui-form-label">所在区块:</label>'+
                                '            <div class="layui-input-block">'+
                                '                <input type="text" name="blockNum" class="layui-input" style="border: 0" value="'+data.blockNum+'"  id="blockNum" readonly>'+
                                '            </div>'+
                                '        </div>'+
                                '        <div class="layui-form-item">'+
                                '            <label class="layui-form-label">签名人:</label>'+
                                '            <div class="layui-input-block">'+
                                '                <input type="text" name="username" class="layui-input" style="border: 0" value="'+data.userName+'"  id="userName" readonly>'+
                                '            </div>'+
                                '        </div>'+
                                '       '
                        })
                    }else{
                        parent.layer.msg(result.msg)
                    }

                },error: function (err) {
                    showloading(false);
                    parent.layer.msg(err.msg)
                }

            })
            return false;
        });


    });

    function verifyFile(fileName) {
        var fileType = fileName.substr(fileName.lastIndexOf(".")).toUpperCase();
        if (fileType != ".MP3") {
            parent.layer.msg("音乐文件限于mp3格式");
            return false;
        }else{
            return true;
        }
    }

    function showloading(t) {
        if (t) {//如果是true则显示loading
            console.log(t);
//1。
            /*loading = parent.layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });*/
//1.end
//2.带文字的
            var loadingIndex = parent.layer.load(2, { //icon支持传入0-2
                shade: [0.5, 'gray'], //0.5透明度的灰色背景
                content: '音乐验证数据中...',
                success: function (layero) {
                    layero.find('.layui-layer-content').css({
                        'padding-top': '39px',
                        'width': '120px'
                    });
                }
            });
//2 end
        } else {//如果是false则关闭loading
            console.log("关闭loading层:" + t);
            parent.layer.closeAll('loading');
        }
    }
</script>
</html>
